<script setup>
import { computed } from 'vue';
import router from "@/router/index.js";
const props = defineProps({
  id: {
    type: [Number, null],
    required: false,
    default: null
  },
  imageSrc: {
    type: [String, null],
    required: false,
    default: null
  },
  teamName: {
    type: [String, null],
    required: false,
    default: null
  },
  leaderName: {
    type: [String, null],
    required: false,
    default: null
  },
  currentMembers: {
    type: [Number, null],
    required: false,
    default: null
  },
  maxMembers: {
    type: [Number, null],
    required: false,
    default: null
  },
  description: {
    type: [String, null],
    required: false,
    default: null
  },
  tags: {
    type: [Array, null],
    required: false,
    default: null
  }
})
// 计算显示的标签和省略号
const displayedTags = computed(() => {
  if (props.tags.length > 10) {
    return props.tags.slice(0, 10);
  }
  return props.tags;
});

const hasMoreTags = computed(() => props.tags.length > 10);

/**
 * 页面跳转
 */
const onClickTeamCard = (id) => {
  router.push(`/team/detail/${id}`);
}
</script>

<template>
  <div class="team-card" @click="onClickTeamCard(id)">
    <div class="image">
      <van-image
        :src="imageSrc"
        height="100"
        radius="5"
        width="100"
      />
    </div>
    <div class="content">
      <div class="text">
        <div class="name">{{ teamName || '未知' }}</div>
        <div class="desc-1">
          <div class="leader">队长：{{ leaderName|| '未知' }}</div>
          <div class="num">人数：{{ currentMembers|| '未知' }}/{{ maxMembers|| '未知' }}</div>
        </div>
        <div class="desc-2">
          <div class="description">{{ description|| '暂无描述' }}</div>
        </div>
      </div>
    </div>
    <div class="user-tags">
      <van-tag v-for="(item, index) in displayedTags" :key="index" class="tag-item" size="small" type="primary">
        {{ item }}
      </van-tag>
      <span v-if="hasMoreTags" class="tag-item">.....</span>
    </div>
  </div>
</template>



<style scoped>
.team-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px;
  background-color: #fff;
  position: relative;
}

.team-card .image {
  margin-right: 10px;
}

.team-card .content {
  width: 200px;
  flex-grow: 1;
}

.team-card .content .text .name {
  width: 200px;
  font-size: 15px;
  color: #202020;
}

.team-card .content .text {
  width: 200px;
}

.team-card .content .text .desc-1 {
  width: 230px;
  display: flex;
  font-size: 12px;
  color: #4c4e51;
  margin-top: 5px;
}

.team-card .content .text .desc-2 .description {
  width: 200px;
  font-size: 12px;
  color: #1c1c1c;
  margin-top: 5px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-card .content .text .desc-1 .leader {
  margin-right: 5px;
}

.user-tags {
  width: 330px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
